<template>
  <div class="mybody">
    <div class="mycontent">
      <v-sheet
        elevation="18"
        class="mx-auto kuang"
        height="500px"
        width="68%"
      >
        <div class="loginIntro">
          <div class="picture">
            <v-avatar>
              <v-img
                width="150px"
                height="150px"
                :src="`http://ly-chen.oss-cn-beijing.aliyuncs.com/image/e2WBtnwRM2QtZy8wh7HW.jpg`"
                aspect-ratio="1"
                class="grey lighten-2"
              >
                <template v-slot:placeholder>
                  <v-layout
                    fill-height
                    align-center
                    justify-center
                    ma-0
                  >
                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                  </v-layout>
                </template>
              </v-img>
            </v-avatar>
          </div>
          <div class="font-content">
            <p>愿你眉眼如初</p>
            <p>岁月如故</p>
            <p class="efont">May you be as happy as ever</p>
          </div>
        </div>
        <div class="loginform">
          <div class="form01">
            <el-form :model="registerForm" label-width="110px" label-position="left" :rules="rules" ref="registerForm">
              <el-form-item label="Name" prop="name" >
                <el-input placeholder="请输入用户名" v-model="registerForm.name" @blur="checkUserNameAndPhone(1)"></el-input>
              </el-form-item>
              <el-form-item label="Gender" prop="sex" >
                <v-radio-group v-model="registerForm.sex" row>
                  <svg-icon icon-class="nan02" size="34"></svg-icon>
                  <v-radio  value="1"></v-radio>
                  <svg-icon icon-class="nv02" size="34"></svg-icon>
                  <v-radio  value="0"></v-radio>
                </v-radio-group>
              </el-form-item>
              <el-form-item label="Location" prop="location" >
                <el-select v-model="registerForm.location" placeholder="地区">
                  <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="Mobile" prop="phone" >
                <el-input placeholder="请输入手机号"  v-model="registerForm.phone" @blur="checkUserNameAndPhone(2)"></el-input>
              </el-form-item>
              <el-form-item prop="phoneCode">
                <el-input v-model="registerForm.phoneCode" placeholder="请输入验证码" ></el-input>
                <el-button :type="!canClick?`primary`:`info`" style="width: 125px" :disabled="canClick" @click.prevent="sendCheckCode">{{codeButton}}</el-button>
              </el-form-item>
              <el-form-item label="Password" prop="password">
                <el-input placeholder="请输入密码" v-model="registerForm.password" show-password></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('registerForm')" >提交</el-button>
                <el-button @click="resetForm('registerForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </v-sheet>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import loginLogo from '../components/LoginLogo'

export default {
  name: 'register-page',
  data: function () {
    var validateName = (rule, value, callback) => {
      setTimeout(() => {
        if (this.isvalid){
          callback()
        }else {
          callback(new Error('用户名已存在'));
        }
      }, 1000);
    }
    var validatePhone = (rule, value, callback) => {
      if (!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(value)) {
        callback(new Error('手机号格式不正确'));
      }
        setTimeout(() => {
        if (this.isvalid){
          callback()
        }else {
          callback(new Error('手机号已存在'));
        }
      }, 1000);
    }
    return {
      isvalid:false,
      showSuccess: false, // 提示成功
      showError: false, // 提示失败
      codeButton: '获取验证码',
      totalTime: 60,
      canClick: false,  //添加canClick
      registerForm: { // 注册
        name: '',
        password: '',
        sex: '1',
        phone: '',
        phoneCode: '',
        location: ''
      },

      rules: {
        name: [
          { required: true,  message: '用户名不能空', trigger: 'blur' },
          { validator: validateName, trigger: 'blur' }
        ],
        password: [
          { required: true,  message: '密码不能空', trigger: 'blur' }
        ],
        phone: [
          {  required:true, message: '手机号码不能空', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        phoneCode: [
          {  required:true, message: '验证码不能空', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入地区', trigger: 'blur' }
        ]
      },
      cities: [{
        value: '北京',
        label: '北京'
      }, {
        value: '天津',
        label: '天津'
      }, {
        value: '河北',
        label: '河北'
      }, {
        value: '山西',
        label: '山西'
      }, {
        value: '内蒙古',
        label: '内蒙古'
      }, {
        value: '辽宁',
        label: '辽宁'
      }, {
        value: '吉林',
        label: '吉林'
      }, {
        value: '黑龙江',
        label: '黑龙江'
      }, {
        value: '上海',
        label: '上海'
      }, {
        value: '江苏',
        label: '江苏'
      }, {
        value: '浙江',
        label: '浙江'
      }, {
        value: '安徽',
        label: '安徽'
      }, {
        value: '福建',
        label: '福建'
      }, {
        value: '江西',
        label: '江西'
      }, {
        value: '山东',
        label: '山东'
      }, {
        value: '河南',
        label: '河南'
      }, {
        value: '湖北',
        label: '湖北'
      }, {
        value: '湖南',
        label: '湖南'
      }, {
        value: '广东',
        label: '广东'
      }, {
        value: '广西',
        label: '广西'
      }, {
        value: '海南',
        label: '海南'
      }, {
        value: '重庆',
        label: '重庆'
      }, {
        value: '四川',
        label: '四川'
      }, {
        value: '贵州',
        label: '贵州'
      }, {
        value: '云南',
        label: '云南'
      }, {
        value: '西藏',
        label: '西藏'
      }, {
        value: '陕西',
        label: '陕西'
      }, {
        value: '甘肃',
        label: '甘肃'
      }, {
        value: '青海',
        label: '青海'
      }, {
        value: '宁夏',
        label: '宁夏'
      }, {
        value: '新疆',
        label: '新疆'
      }, {
        value: '香港',
        label: '香港'
      }, {
        value: '澳门',
        label: '澳门'
      }, {
        value: '台湾',
        label: '台湾'
      }]
    }
  },
  methods: {
    sendCheckCode() {
      this.startTimeOut()
      if (this.registerForm.phone != '') {
        const phone = this.$qs.stringify({phone:this.registerForm.phone})
        axios.post(this.$store.state.HOST + "/user/code",phone).then(()=>{
        }).catch(error=>{
          this.$message.error("验证码获取失败")
          console.log(error)
        })
      }
    },

    // 注册
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this
          let params = _this.$qs.stringify({
            username : _this.registerForm.name,
            password : _this.registerForm.password,
            sex : _this.registerForm.sex,
            phone : _this.registerForm.phone,
            location : _this.registerForm.location,
            avator : 'http://ly-chen.oss-cn-beijing.aliyuncs.com/image/7fxrP6yie3dJkEtRkmGB.jpg',
            code : _this.registerForm.phoneCode
          })
          axios.post(_this.$store.state.HOST + '/user/register', params)
            .then(response => {
              if (response.data) {
                this.$message.success("注册成功")
                setTimeout(function () {
                  _this.$router.push({path: '/'})
                }, 2000)
              } else {
                this.$message.error("服务器忙。。。。")
              }
            }).catch(failResponse => {
                this.$message.error("服务器忙。。。。")
          })
        } else {
          this.$message.error("请正确填写信息")
          return false;
        }
      });
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 向后台发送异步请求，判断用户名和电话号码是否重复
    // type = 1,是用户名，2是电话号
    checkUserNameAndPhone (type) {
        axios.get(this.$store.state.HOST + "/user/register/checkOnly",{
          params: {
            type: type,
            value: type===1?this.registerForm.name:this.registerForm.phone
          }
        }).then(resp => {
          this.isvalid  = resp.data
        }).catch(error=>{
          console.error(error)
        })
    },

    //倒数
    startTimeOut () {
      // if (this.canClick) return   //改动的是这两行代码
      this.canClick = true
      this.codeButton = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.codeButton = this.totalTime + 's后重新发送'
        if (this.totalTime < 10) {
          this.codeButton = '0'+this.totalTime + 's后重新发送'
        }
        if (this.totalTime < 0) {
          window.clearInterval(clock)
          this.codeButton = '获取验证码'
          this.totalTime = 10
          this.canClick = false   //这里重新开启
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
  .register{
    position: absolute;
    top:150px;
    background-color: white;
    border-radius: 10px;
    width: 350px;
    height: 580px;
    margin-left: 750px;
    padding: 50px 50px 50px 20px;
  }
  .login-btn {
    display: flex;
    justify-content: space-between;
    margin-left: 40px;
  }
  .login-btn button{
    width: 100%;
    height:36px;
    margin-top: 40px;
  }
  .local {
    position: absolute;
    width: 270px;
    top: 550px;
    margin-left: 80px;
  }



  .mybody{
    width: 100%;
    background-color: #e3f2fd;
  }
  .mycontent{
    margin-top: 100px;
    height: 600px;
  }
  .kuang {
    border-radius: 30px;
  }
  .loginIntro {
    float: left;
    height: 100%;
    width: 40%;
    background-color: #fdd836;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
  }
  .picture {
    padding-top: 100px;
    padding-left: 180px;
  }
  .font-content {
    padding-top: 80px;
    text-align: center;
    font-size: 1.6em;
    font-weight: 700;
    font-family: 楷体;
  }
  .font-content p {
    margin: 0;
  }
  .font-content .efont {
    font-family: Vivaldi;
    font-weight: 900;
    font-size: 1.1em;
  }

  .loginform {
    height: 100%;
    width: 60%;
    float: left;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
  }
  .form01 {
    width: 80%;
    margin-left: 80px;
    margin-top: 20px;
  }
  .el-form .el-form-item >>> label{
    font-size: 1.2em;
    font-weight: 600;
    font-family: Cambria;
    color: black;
  }
  .el-form .el-form-item .el-input {
    width: 80%;
    margin-left: 30px;
  }
  .el-form .el-form-item >>> .el-form-item__error {
    margin-left: 30px;

  }

  .el-form .el-form-item:nth-child(5)  .el-input {
    width: 140px;
  }
  /*改变框架的样式要用>>> 或 deep*/
  .el-form .el-form-item:nth-child(3) >>> .el-input{
    width: 80%;
    margin-left: 30px;
  }
  .el-form .el-form-item:last-child {
    margin-top: 50px;
    margin-left: 10px;
  }
  .el-form .el-form-item .el-button {
    margin-left: 40px;
  }
  .v-input--selection-controls {
    margin: 0;
    padding: 0;
    margin-left: 20px;
  }
  .v-radio {
    margin-left: 10px;
  }
  .el-form-item:nth-child(2) {
    margin: 0;
  }
 .el-form-item >>> .label {
    width: 110px;
  }
</style>
